<template>
  <a-modal
    title="新增传感器类型"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          label="类型编码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input placeholder="请输入传感器类型编码" v-decorator="['code', {rules: [{required: true, message: '请输入传感器类型编码！'}]}]" />
        </a-form-item>

        <a-form-item
          label="类型名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input placeholder="请输入类型名称" v-decorator="['name', {rules: [{required: true, message: '请输入类型名称！'}]}]" />
        </a-form-item>

        <a-form-item
          label="型号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input placeholder="请输入型号" v-decorator="['model', {rules: [{required: true, message: '请输入型号！'}]}]" />
        </a-form-item>

        <a-form-item
          label="预览图"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
          style="text-align: left"
        >
          <a-upload
            name="fileName"
            :customRequest="customRequest"
            @preview="handlePreview"
            list-type="picture-card"
            :file-list="fileList"
            :show-upload-list="false"
            @change="change"
          >
            <img v-if="modelFile" :src="modelFile | imgPath" alt="avatar" style="width: 100px;height: 100px;"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>

        </a-form-item>
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>

        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input placeholder="请输入备注" v-decorator="['remark', {rules: [{required: false, message: '请输入备注！'}]}]" />
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { add } from '@/api/modular/main/bizchanneltype/bizChannelTypeManage'
  import { getUploadFileName } from '@/api/modular/system/fileManage'

  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        modelFile: '',
        previewVisible: false,
        previewImage: '',
        fileList: [],
        loading: false
      }
    },
    methods: {
      add (record) {
        this.visible = true
      },
      /**
       * 上传文件
       */
      customRequest (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        getUploadFileName(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.modelFile = res.data
            data.onSuccess(res, data.file)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true

        validateFields((errors, values) => {
          values.fileName = this.modelFile
          if (!errors) {
            add(values).then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success('新增成功')
                this.handleCancel()
                this.$emit('ok', values)
              } else {
                this.$message.info('新增失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.modelFile = ''
        this.fileList = []
      },
      getBase64 (file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => resolve(reader.result)
          reader.onerror = error => reject(error)
        })
      },
      previewCancel () {
        this.previewVisible = false
      },
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      change ({ fileList }) {
        this.fileList = fileList
      }
    }
  }
</script>
